<template>
  <div id="orders" :class="styleTypeClass" :style="{width,height:'100%'}">
    <!-- 默认样式-->
    <template>
      <div class="mt-3" style="height:95%">
        <EchartsIndex :options="options"/>
      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin/index'
import mixinEcharts  from '../mixin/echarts'
export default {
  name: "Orders",
  mixins: [mixin,mixinEcharts],
  components: {},
  data(){
    return {
      options:{
        tooltip: {
          trigger: 'item'
        },
        //饼图 位置
        grid:{
          top:50,
          // bottom:20,
          // left:55,
          // right:20
          left: "100",
          // containLabel: true,
        },
        // color: this.colors,
        xAxis: {
          type: 'category',
          data: this.productNames,
          name:'销量',
          axisLabel:{
            interval:0,//横轴全部显示
            rotate:-50,
            textStyle: {
              color: '#1e2d47',  //更改坐标轴文字颜色
            }
          },
          axisLine:{
            lineStyle:{
              color:'#1e2d47',
              width:1,
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel:{
            textStyle: {
              color: '#1e2d47',  //更改Y坐标轴文字颜色
            }
          },
          axisLine:{
            lineStyle:{
              color:'#1e2d47',
              width:1
            }
          }
        },
        series: [
          {
            data: this.saleCounts,
            // data: ['464', '177', '181', '263', '82', '74', '8', '5', '40', '6', '0', '16', '9', '2', '18', '10', '10', '2', '15', '11', '84', '26', '16', '20', '42', '18', '32', '45', '56', '22', '45', '24', '10', '70', '30', '51', '8', '15', '10', '4', '8', '13', '38', '14', '14', '54'],
            type: 'bar',
            barWidth: 10,//宽度
          }
        ]
      }
    }
  },
  props:{
    width:{
      type:String,
      default:'100%'
    },
    productNames:{
      type:Array,
      default:()=>[]
    },
    saleCounts:{
      type:Array,
      default:()=>[]
    }
  },
  computed:{

  },
  mounted() {
    console.log('productNames',this.productNames);
    console.log('saleCounts',this.saleCounts);
  },
  watch:{
    productNames() {
      console.log('productNames',this.productNames);
      this.options.xAxis.data = this.productNames;
    },
    saleCounts() {
      console.log('saleCounts',this.saleCounts);
      this.options.series[0].data = this.saleCounts;
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/datav/infoPlatform.scss';
</style>
